<template>
	<view class="decision-content">
		<view class="message-msg">
			<!-- <view>事件综述：</view> -->
			<!-- 全市各地 -->
			<view class="">事件综述：截止到{{ '' | dateStr('MM月DD日HH时') }}，共上报事件{{ dataList.length }}条</view>
		</view>

		<view class="select-title mt10">
			<listSelect v-model="areaCode" :list="cityList" @confirm="confAreaCode" style="width: 185rpx"></listSelect>
			<view class="line"></view>

			<listSelect v-model="areaCode2" :list="townList" @confirm="search" style="width: 185rpx"></listSelect>
			<view class="line"></view>
			<listSelect
				style="width: 185rpx"
				v-model="form.evType"
				@confirm="search"
				:list="evList"
				class="top1-item"
			></listSelect>
			<view class="line"></view>

			<listSelect
				style="width: 185rpx"
				v-model="form.level"
				@confirm="search"
				:list="levelList"
				class="top1-item"
			></listSelect>

			<view class="map-icon-message flex-cc ml15" @click="turnTo">
				<image src="@/static/image/map/sjmap.png" mode="widthFix" style="width: 34rpx" />
			</view>
			<!-- <view class="line"></view>
			<view @click="search" class="search-btn flex-cc">查询</view> -->
		</view>

		<view class="message-sv mt10">
			<view class="message-list">
				<view class="list-sin flex-cc" style="width: 150rpx">发布时间</view>
				<view class="list-sin flex-cc" style="width: 150rpx">发布人</view>
				<view class="list-sin flex-cc" style="width: 200rpx">发布地点</view>
				<view class="list-sin flex-cc" style="width: 80rpx">详情</view>
			</view>
			<u-collapse ref="collapse" class="item-box-list" v-if="dataList.length > 0">
				<!-- -->

				<u-collapse-item
					v-for="(item, index) in dataList"
					:key="index"
					@change="(e) => fnColChange(e, item, index)"
					class="item-collapse"
				>
					<template slot="title-all">
						<view class="col-box">
							<view class="list-sin flex-cc" style="width: 150rpx">{{ item.evTime }}</view>
							<view class="list-sin flex-cc" style="width: 150rpx">{{ item.userName }}</view>
							<view class="list-sin flex-cc" style="width: 200rpx">{{ item.evLocation }}</view>
							<view class="list-sin flex-cc" style="width: 80rpx">
								<u-icon v-show="colShowList.includes(index)" name="arrow-up-fill" size="20" color="#607589"></u-icon>
								<u-icon v-show="!colShowList.includes(index)" name="arrow-down-fill" size="20" color="#607589"></u-icon>
							</view>
						</view>
					</template>
					<view class="body-cont">
						<view class="cont-sin">
							<view class="cont-sin-title">事件类型</view>
							<view class="cont-sin-view">{{ item.evType }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">严重程度</view>
							<view class="cont-sin-view">{{ labelLevel(item.evLevel) }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件描述</view>
							<view class="cont-sin-view">{{ item.evDescribe }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件时间</view>
							<view class="cont-sin-view">{{ item.evTime }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">解决时间</view>
							<view class="cont-sin-view">{{ item.solveTime }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">事件地点</view>
							<view class="cont-sin-view">{{ item.evLocation }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">附件</view>
							<view class="cont-sin-view">
								<fileShow :files="item.fileUrls"></fileShow>
							</view>
						</view>
						<view class="cont-sin borUp flexD-vc pt10">
							<view class="cont-sin-title">处置过程</view>
							<view class="cont-sin-view">
								<view v-for="elSin in item.urgentEventLogs" :key="elSin.id" class="mt5 bot-bot">
									<text
										class="fs24"
										:style="{ color: elSin.statusName == '确认' ? '#0085FF' : '#52AF9F', width: '120rpx' }"
									>
										<text class="mr3">✳</text>
										{{ elSin.statusName }}
									</text>

									<view>
										<text class="ml10">{{ elSin.updateUserName }}</text>
										<text class="ml10">{{ elSin.userPhone }}</text>
										<text class="ml10">{{ elSin.updateTime | dateStr('YYYY-MM-DD HH:mm') }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<u-empty text="暂无数据" mode="list" v-else></u-empty>
		</view>

		<u-picker
			mode="time"
			:default-time="form.time"
			v-model="timeShow"
			:params="timeParams"
			@confirm="confirmTime"
		></u-picker>
	</view>
</template>
<script>
	import listSelect from '@/components/common/select/listSelect.vue'
	import areaSelect from '@/components/common/select/areaSelect.vue'
	import sjsbApi from '@/api/yjzh/sjsb.js'
	import eventTool from '@/utils/event'
	import { debounce } from '@/utils/util'
	export default {
		name: '',
		components: { listSelect, areaSelect, fileShow: () => import('./cpn/fileShow.vue') },
		data() {
			return {
				form: {
					evType: 'all',
					time: '2023-04',
					statusType: 0,
					level: 'all'
				},
				evList: [{ label: '所有事件', value: 'all', extra: 0 }],
				statusList: [
					{ label: '所有状态', value: 0, extra: 0 },
					{ label: '已解决', value: 1, extra: 1 },
					{ label: '未解决', value: 2, extra: 2 }
				],
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},

				areaCode: '',
				areaCode2: '',
				cityList: [],
				townList: [],

				dataList: [],
				colShowList: [],

				evList: [{ label: '所有事件', value: 'all' }],
				levelList: [{ label: '所有等级', value: 'all' }]
			}
		},
		computed: {},
		async mounted() {
			this.getUserInfoData = uni.getStorageSync('getUserInfoData')
			this.getDeptTreeData = uni.getStorageSync('getDeptTreeData')

			this.areaCode = this.getUserInfoData.dept.parentCode ? this.getUserInfoData.dept.parentCode : ''
			this.areaCode2 = this.getUserInfoData.dept.code
			// this.search()
			this.initPage()

			const res = await eventTool.getTypeJson()
			this.evList.push(...res.evTypeList)
			this.levelList.push(...res.evLevelList)
		},
		methods: {
			initPage() {
				let cityList = this.getDeptTreeData[0].children.map((item) => {
					return {
						label: item.name,
						value: item.code,
						children: item.children
					}
				})
				cityList.unshift({
					label: this.getDeptTreeData[0].name,
					value: this.getDeptTreeData[0].code,
					children: this.getDeptTreeData[0].children
				})
				this.cityList = cityList

				let index = this.cityList.findIndex((el) => el.value == this.areaCode)
				if (index == -1) {
					index = 0
				}

				this.confAreaCode(null, this.cityList[index], false)
				this.search()
			},
			async init() {
				let areaCodes = []
				let parentItem = []

				if (this.areaCode2 == 'all') {
					parentItem = this.findItemById(this.getDeptTreeData[0], this.areaCode)
				} else {
					parentItem = this.findItemById(this.getDeptTreeData[0], this.areaCode2)
				}

				areaCodes = this.getChildCode([parentItem])

				// areaCodes.push(this.areaCode)
				// if (this.areaCode) {
				// 	areaCodes.push(this.areaCode)
				// }
				// if (this.areaCode2 != '255' && this.areaCode2) {
				// 	areaCodes.push(this.areaCode2)
				// }
				const resp = await sjsbApi.solveEvent({
					areaCodes: areaCodes.filter((item) => !item.includes('all')),
					evTypeCode: this.form.evType != 'all' ? this.form.evType : undefined,
					evLevel: this.form.level != 'all' ? this.form.level : undefined,
					date: undefined
				})
				if (resp.code == 200) {
					this.dataList = resp.data
				}
			},
			labelLevel(value) {
				let item = this.levelList.find((el) => el.value == value)
				return item.label
			},
			showTimeEv() {
				this.timeShow = true
			},
			confirmTime(value) {
				this.form.time = `${value.year}-${value.month}`
			},
			search: debounce(function (params) {
				this.$nextTick(() => {
					this.init()
				})
			}, 200),
			async fnColChange(e, val, idx) {
				this.colShowList = []
				if (!e.show) {
					return
				}
				this.colShowList.push(idx)
			},
			confAreaCode(value, item, isAdd = true) {
				console.info(`item:`, item)
				this.townList = item.children.map((el) => {
					return {
						label: el.name,
						value: el.code
					}
				})
				this.townList.unshift({
					label: '全部',
					value: 'all'
				})
				if (isAdd) {
					this.areaCode2 = this.townList[0].value
				}
				this.search()
			},
			findItemById(item, code) {
				if (item.code === code) {
					return item
				}
				for (let i = 0; item.children && i < item.children.length; i++) {
					const found = this.findItemById(item.children[i], code)
					if (found) {
						return found
					}
				}
				return null
			},
			getChildCode(arr) {
				let codes = []
				arr.forEach((el) => {
					codes.push(el.code)
					if (el.children && el.children.length > 0) {
						let res = this.getChildCode(el.children)
						codes.push(...res)
					}
				})

				return codes
			},

			turnTo() {
				uni.navigateTo({
					url: '/pages-subPackages/events/eventsMap?data=' + encodeURIComponent(JSON.stringify(this.dataList)),
					fail: (err) => {}
				})

				// uni.$emit('eventsMap', this.dataList)
			}
		}
	}
</script>
<style lang="less" scoped>
	.decision-content {
		width: 100%;
		height: 100%;
		padding: 24rpx;
		.select-title {
			width: 100%;
			height: 60rpx;
			background: #e4f2ff;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx;
			.line {
				height: 35rpx;
				width: 5rpx;
				color: #607589;
				background: #607589;
				border-radius: 10rpx;
				margin: 0 15rpx;
				opacity: 0.25;
			}
			.search-btn {
				width: 123rpx;
				height: 50rpx;
				background: #41a4ff;
				border-radius: 4rpx;
				color: #fff;
				letter-spacing: 10rpx;
			}
			/deep/.areaSelect-box {
				display: flex;
				justify-content: center;
			}

			.map-icon-message {
				min-width: 50rpx;
				height: 50rpx;
				background: #41a4ff;
			}
		}
		.message-msg {
			font-weight: 500;
			font-size: 24rpx;

			text-align: left;
			color: #70757a;
			border: 1px dashed #41a4ff;
			border-radius: 4px;
			padding: 10rpx;
		}
		.message-sv {
			width: 100%;
			height: calc(100% - 275rpx);
			font-size: 26rpx;
			overflow: auto;

			/deep/.u-collapse-head {
				padding: 0rpx 0;
			}
			.u-collapse-item {
				margin: 0rpx 0;
			}

			.message-list {
				width: 100%;
				display: flex;
				justify-content: space-between;
				background: #f5faff;
				height: 70rpx;
				.list-sin {
					// flex: 1;
				}
			}
			.item-collapse {
				&:nth-child(2n) {
					.col-box {
						background: #e3f2ff;
					}
					.body-cont {
						background: #f5faff;
					}
				}
			}
			.col-box {
				background: #f5f5f5;
				font-size: 26rpx;
				width: 100%;
				padding-right: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				.list-sin {
					// flex: 1;
					text-align: center;
				}
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.071);
			}
			.success-btn {
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #cdf0ea;
				border: 1rpx solid #52af9f;
				border-radius: 4rpx;
				color: #52af9f;
			}
			.danger-btn {
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #ffe6e6;
				border: 1rpx solid #ff0000;
				border-radius: 4rpx;
				color: #ff4747;
			}

			.info-btn {
				width: 100rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 7rpx 15rpx;
				background: #52af9f;
				border: 1rpx solid #52af9f;
				border-radius: 4rpx;
				color: #fff;
			}

			.info-deal {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				border-top: 2rpx solid rgba(96, 117, 137, 0.121);
				padding: 10rpx 0;
			}

			.body-cont {
				background: #f5f5f5;
				width: 100%;
				font-size: 26rpx;
				border-top: 2rpx solid rgba(96, 117, 137, 0.121);
				border-bottom: 2rpx solid rgba(96, 117, 137, 0.12);
				padding: 0 20rpx;

				.cont-sin {
					width: 100%;
					display: flex;
					margin: 10rpx 0;
					.cont-sin-title {
						width: 120rpx;
						text-align: right;
						font-size: 26rpx;
					}
					.cont-sin-view {
						margin-left: 25rpx;
						flex: 1;
						color: #000;
						font-size: 26rpx;
						.bot-bot {
							margin: 5rpx 0;
							// border-bottom: 1rpx solid rgba(102, 102, 102, 0.13);
							padding-bottom: 2rpx;
							padding-right: 10rpx;
							// margin-left: -25rpx;
						}
					}
				}
			}
		}
	}
</style>
